<template>
	<app-layout>
		<view v-show="loading" :class="shareShow ? 'preventTouchMove' : ''">
			<view>
				<app-goods-banner :pic-list="goods.pic_url || []" :isCart="false" :share="goods.share" :goods_id="goods.id" :video-url="goods.video_url"></app-goods-banner>
			</view>
			<view class="goods-name">{{goods.name}}</view>
			<view class='price main-between'>
				<view>	
					<view class="flex align-center">
						<view class="couponBox" v-if="gtype == 1 || gtype == 3">赠券{{goods.give_integral}}</view>
						<view class="couponBox" v-if="gtype == 2">抵券{{goods.forehead_integral}}</view>
						<view style="margin-left: 20upx;" class="flex align-center">
							<text style="font-size: 24upx;">￥</text>
							<text style="font-size: 32upx;font-weight: bold;">{{(goods.price-goods.forehead_integral).toFixed(2)-0}}</text>
						</view> 
					</view>
					<view class='original' v-if="isUnderlinePrice == 1">
						<text v-if="gtype != 2">￥{{goods.original_price}}</text>
						<!-- <text v-else>￥{{goods.price-0}}</text> -->
					</view>
				</view>
				<!-- <view class="share" @click="shareClick">
					<image src="/static/image/icon/icon-share.png"></image>
					<view>分享</view>
				</view> -->
			</view>
			<view>
				<app-share-qr-code v-model="shareShow" :url="shareUrl"></app-share-qr-code>
			</view> 
			<view>
				<app-service :list="goods.services"></app-service>
			</view>
			<view class="attr">
				<app-attr :goods="goods" :attrGroupList="goods.attr_groups" :show="attrShow" :cartShow="false" buyText="立即购买"
				 :previewUrl="previewUrl" :submitUrl="submitUrl" @attrtap="onAttr" sign="jimai" :gtype="gtype" :forehead_integral="goods.forehead_integral" :chooseNumber="false">
					<view slot="button">
						<app-goods-attr :attr-groups="goods.attr_groups" :selectAttr="selectAttr"></app-goods-attr>
					</view>
				</app-attr>
			</view>
			<view class="marketing" v-if="goods">
				<block v-if="goods.goods_marketing">
					<app-goods-marketing :limit="goods.goods_marketing.limit" :shipping="goods.goods_marketing.shipping"
					 :pickup="goods.goods_marketing.pickup" :card="goods.goods_marketing_award.card" :integral="goods.goods_marketing_award.integral"></app-goods-marketing>
				</block>

			</view>
			<view class="detail">
				<image src="/static/image/icon/goods-detail.png"></image>
				<view>
					<app-rich-text :content="goods.detail"></app-rich-text>
				</view>
			</view>
			<view class="bottom"></view>
			<view>
				<app-jump-button>
				</app-jump-button>
			</view>
			<view :class="[`app-bottom dir-left-nowrap`, `${iphone_x? 'iphone_x':''}`]">
				<view class="dir-top-nowrap main-center cross-center little box-grow-0" @click="back">
					<image src="/static/image/icon/index.png"></image>
					<view>首页</view>
				</view>
				<view v-if="goods.goods_stock == 0 || goods.state == 0" class="dir-left-nowrap">
					<view class="main-center cross-center button" style="background-color: #CDCDCD;color: #fff;">已售罄
					</view>
				</view>
				<view v-else class="dir-left-nowrap">
					<view class="main-center cross-center button" :class="theme + '-background'" @click="clickAttr">立即购买
					</view>
				</view>
			</view>
		</view>
	</app-layout>
</template>

<script>
	import {
		mapState
	} from "vuex";
	import appGoodsBanner from "../../components/page-component/goods/app-goods-banner.vue";
	import appService from "../../components/page-component/goods/app-goods-service.vue";
	import appGoodsAttr from "../../components/page-component/goods/app-goods-attr.vue";
	import appAttr from "../../components/page-component/app-attr/app-attr.vue";
	import appGoodsMarketing from "../../components/page-component/goods/app-goods-marketing.vue";
	import appRichText from "../../components/basic-component/app-rich/parse.vue";
	import appComments from "../../components/page-component/app-comments/app-comments.vue";
	import appRecommendedProduct from "../../components/page-component/app-recommended-product/app-recommended-product.vue";
	import appShareQrCode from '../../components/page-component/app-share-qr-code-poster/app-share-qr-code-poster.vue';

	export default {
		name: "goods",
		components: {
			appGoodsBanner,
			appShareQrCode,
			appService,
			appGoodsAttr,
			appAttr,
			appGoodsMarketing,
			appRichText,
			appComments,
			appRecommendedProduct,
		},
		data() {
			return {
				goods: {
					integralMallGoods: {
						integral_num: 0
					},
					price: 0,
					JimaiGoods:{}
				},
				selectAttr: null,
				recommend_list: null,
				shareShow: false,
				shareUrl: null,
				previewUrl: null,
				submitUrl: null,
				iphone_x: false,
				attrShow: 0,
				loading: false,
				gtype:''
			};
		},
		computed: {
			...mapState({
				theme: state => state.mallConfig.theme,
				mall: state => state.mallConfig.mall,
				isUnderlinePrice: state => state.mallConfig.mall.setting.is_underline_price,
			}),
		},
		onLoad(options) {
			let that = this;
			this.gtype = options.type
			var id = options.goods_id || options.goods
			that.loadData(id);
			that.previewUrl = that.$api.jimai.order_preview;
			that.submitUrl = that.$api.jimai.order_submit;
			uni.getSystemInfo({
				success: function(res) {
					if (res.model.indexOf('iPhone X') > -1 || res.model.indexOf('iPhone 11') > -1 || res.model.indexOf('iPhone11') >
						-1 || res.model.indexOf('iPhone12') > -1 || res.model.indexOf('Unknown Device') > -1) {
						that.iphone_x = true;
					}
				}
			})
		},
		onShareAppMessage: function() {
			return this.$shareAppMessage({
				title: this.goods.app_share_title ? this.goods.app_share_title : this.goods.name,
				imageUrl: this.goods.app_share_pic ? this.goods.app_share_pic : this.goods.cover_pic,
				path: "/plugins/jimai/goods",
				params: {
					goods_id: this.goods.id
				}
			});
		},
		methods: {
			loadData(id) {
				uni.showLoading({
					title:'加载中',
					mask:true
				})
				this.$request({
					url: this.$api.jimai.goods_detail,
					data: {
						id: id
					}
				}).then(response => {
					uni.hideLoading()
					let {
						code,
						data,
						msg
					} = response;
					if (code === 0) {
						this.goods = data.detail;
						this.shareUrl = this.$api.integral_mall.poster + '&goods_id=' + id;
						this.goods.id = id;
						this.loading = true;
						var obj = {
							title: '美试客',
							desc:this.goods.app_share_title ? this.goods.app_share_title : this.goods.name,
							imgurl: this.goods.app_share_pic ? this.goods.app_share_pic : this.goods.cover_pic,
							mch_id: this.goods.mch_id,
							goods:id,
							type:this.gtype,
							url:'plugins/jimai/goods'
						}
						console.log(obj)
						this.$wx.shareWX(obj)
						if (this.$wx && this.$wx.isWechat()) { //检查是否是微信环境
							this.$wx.shareWX(obj)
						}
					} else {
						uni.showModal({
							title: '提示',
							content: msg,
							showCancel: false
						});
					}
				}).catch(() => {
					uni.hideLoading()
				});
			},
			onAttr(data) {
				this.selectAttr = data;
			},
			shareClick() {
				this.shareShow = true;
			},
			back() {
				uni.redirectTo({
					url: '/pages/index/index'
				});
			},
			clickAttr() {
				this.attrShow = Math.random();
			}
		}
	}
</script>

<style scoped lang="scss">
	.couponBox{
		font-size: 24upx;
		line-height: 40upx;
		padding: 0 10upx;
		color:#ff5a5a;
		border: 1px solid #ff5a5a;
		border-radius: 6upx;
	}
	.preventTouchMove {
		top: 0;
		left: 0;
		width: 100%;
		overflow: hidden;
		position: fixed;
		z-index: 0;
	}

	.goods-name {
		padding: #{24rpx};
		background-color: #ffffff;
		color: $uni-important-color-black;
	}

	.attr {
		padding: #{24rpx} 0;
		background-color: #f7f7f7;
	}

	.recommend {
		.recommend-title {
			margin: #{40rpx} 0 #{32rpx} 0;
			font-size: $uni-font-size-weak-one;
			color: $uni-general-color-two;

			.border {
				border-top: #{1rpx} solid #bbbbbb;
				height: 0;
				width: #{40rpx};
				margin: 0 #{24rpx};
			}

			image {
				width: #{24rpx};
				height: #{24rpx};
				display: block;
				margin-right: #{12rpx};
			}
		}
	}

	.bottom {
		width: 100%;
		height: #{110rpx};
	}

	.app-bottom {
		position: fixed;
		left: 0;
		bottom: 0;
		z-index: 501;
		width: 100%;
		height: #{110rpx};
		font-size: $uni-font-size-general-one;

		.little {
			width: #{110rpx};
			height: 100%;
			background-color: #ffffff;
			font-size: #{20rpx};
			color: $uni-general-color-two;

			&:first-child {
				border-right: #{1rpx} solid #e2e2e2;
			}

			image {
				width: #{40rpx};
				height: #{40rpx};
				display: block;
				margin-bottom: #{10rpx};
			}
		}

		.button {
			width: #{650rpx};
			height: #{110rpx};
		}

		.service {
			background-color: #446dfd;
			color: #ffffff;
		}

		.contact-tel {
			background-color: #f39800;
			color: #ffffff;
		}

		.contact {
			background-color: #4cbf2a;
			color: #ffffff;
		}
	}

	.app-bottom.iphone_x {
		background-color: #fff;
		height: #{160rpx};
		padding-bottom: #{50rpx};
	}

	.comments {
		margin-bottom: #{20rpx};
		background-color: #ffffff;
	}

	.detail {
		background-color: #ffffff;

		image {
			width: 100%;
			height: #{80rpx};
			display: block;
		}
	}

	.price {
		height: #{116rpx};
		font-size: #{40rpx};
		color: #ff4544;
		font-family: DIN;
		padding-left: #{24rpx};
		padding-bottom: #{24rpx};
		background-color: #fff;
		margin-bottom: #{20rpx};
		position: relative;
	}

	.price image {
		height: #{44rpx};
		width: #{44rpx};
		display: block;
		float: left;
		margin-right: #{16rpx};
	}

	.share {
		margin-right: #{20rpx};
		margin-top: #{-30rpx};
		font-size: $uni-font-size-weak-two;
		color: $uni-general-color-one;

		image {
			width: #{40rpx};
			height: #{40rpx};
			margin-bottom: #{10rpx};
		}
	}

	.original {
		background-color: #fff;
		text-decoration: line-through;
		color: #888;
		height: #{60rpx};
		line-height: #{60rpx};
		font-size: #{24rpx};
	}
</style>
